<template>
    <div class="header">
       <div class="header-left">
           <div class="iconfont back-icon">&#xe624;</div>
       </div>
       <div class="header-input">
           <span class="iconfont">&#xe632;</span>
           输入城市/景点/游玩主题
           </div>
           <router-link to='/city'>
       <div class="header-right">
      {{this.city}}
        <span class="iconfont arrow-icon">&#xe64a;</span>
       </div>
        </router-link>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name:'homeheader',
    computed:{
        // 映射
        ...mapState(['city'])
    }
}
</script>
<style lang="stylus" scoped>
// 如果在css中想引用其他的css。需要添加~     @已被设置为src文件
// @import '~@/assets/styles/varibles.styl'
    @import '~styles/varibles.styl'
// 1rem=50px（在reset.css中的html得知）  移动端使用的是2倍图。所以在原像素/2.如设计图是100px。移动端就是50px
.header
    display :flex
    line-height : $headerHeight
    background :$bgColor
    color : #fff
    .header-left
        width : 0.64rem
        float : left
        .back-icon
            font-size: .4rem
            text-align :center
    .header-input
        flex :1
        margin-top : .12rem
        margin-left : .2rem
        padding-left :.2rem
        height : .64rem
        line-height : .64rem
        border-radius : .1rem 
        background :#fff
        color : #ccc
    .header-right
        min-width : 1.04rem
        padding :0 .1rem
        float : right
        text-align : center
        color :#fff
        .arrow-icon
            font-size:.24rem
            margin-left :-.04rem


</style>

